<template>
    <el-card class="technology">
        <div class="title-container">
            <span class="rect"></span>
            <h3>科技专题</h3>
        </div>
        <el-divider></el-divider>
        <div class="contentGrid">
            <div class="gridBlockShort">
                <div class="blockValue" v-if="info.length">{{ computedIndexNum("是否高新技术企业") == 1 ? "是" : "否" }}</div>
                <div v-else class="blockValue">--</div>
                <hr class="dottedLine">
                <div class="blockTitle">是否高新技术企业</div>
            </div>
            <div class="gridBlockShort">
                <div class="blockValue" v-if="info.length">{{ computedIndexNum("R&D经费投入") || "-" }}</div>
                <div v-else class="blockValue">--</div>
                <hr class="dottedLine">
                <div class="blockTitle">R&D经费投入（万元）</div>
            </div>
            <div class="gridBlockShort">
                <div class="blockValue" v-if="info.length">{{ computedIndexNum("是否工程技术研发中心") == 1 ? "是" : "否" }}</div>
                <div v-else class="blockValue">--</div>
                <hr class="dottedLine">
                <div class="blockTitle">是否工程技术研发中心</div>
            </div>
            <div class="gridBlockShort">
                <div class="blockValue" v-if="info.length">{{ computedIndexNum("有效发明专利拥有量") }}</div>
                <div v-else class="blockValue">--</div>
                <hr class="dottedLine">
                <div class="blockTitle">有效发明专利拥有量</div>
            </div>
        </div>

    </el-card>
</template>


<script>
const wjApi = window.$api.enterpriseManagement.wjscms
export default {
    data() {
        return {
            info: []
        }
    },
    props: {
        unifiedSocialCreditCode: {
            type: String,
            default: ""
        }
    },
    methods: {
        computedIndexNum(name) {
            return this.info.find(i => i.SubtypeName === name)?.IndexNum
        },
        async init() {
            this.info = [];
            if (this.unifiedSocialCreditCode) {
                let res = await wjApi.info(
                    `http://221.224.136.227/wjscms/cf/service/DBService/CXQYXQZLXX`,
                    {
                        UID: this.unifiedSocialCreditCode,
                        f: "list"
                    }
                )
                this.info = res.Data
            }
        }
    },
    mounted() {
        // this.init()
    }
}
</script>


<style scoped lang='scss'>
.technology {
    width: 39.5%;

    .contentGrid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        grid-column-gap: 20px;
        grid-row-gap: 6px;

        .gridBlockShort {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;

            .blockValue {
                font-family: BebasNeue;
                font-size: 26px;
                height: 39px;
                line-height: 39px;
            }

            .dottedLine {
                border-style: dotted;
                width: 90px;
            }

            .blockTitle {
                font-size: 12px;
                height: 18px;
            }
        }
    }
}
</style>